import React, {memo, useEffect, useState} from 'react';
import HyLoadingStyle from "./HyLoadingStyle";
import ReactDOM from 'react-dom/client';
/**
 * 时间：2023年12月21日 14点32分
 * 组件说明
 * 该组件是一个全局或者局部的加载蒙版
 *
 * isShow:是否显示,默认为false
 * title:加载内容文字
 * isFullScreen:是否全屏,默认false,以父组件为大小进行覆盖
 * children:子组件,注意:当填写子组件后,代码内部将不会渲染
 * color:颜色,我们这里将加载logo与加载内容文字颜色是一种
 * size:三种大小, small(小) large(大) normal(中).默认为normal
 *
 * 细节补充
 *
 *
 */

type Props = {
  isShow?: Boolean,
  title?: String,
  isFullScreen?: Boolean,
  children?: any,
  color?:String,
  size?: "small" | "large" | "normal",
};

//导出一个方法,通过API的方式来调用该组件
export function openOrCloseHyLoading(props?:Props){
  //先判断是否展示
  if (props?.isShow){
    const hyLoadingBoxDom=document.createElement('div');
    hyLoadingBoxDom.setAttribute("id","hy-loading");
    const rootDom=document.querySelector("#root");
    if (rootDom){
      rootDom.appendChild(hyLoadingBoxDom);
      ReactDOM.createRoot(document.getElementById('hy-loading')as HTMLElement)
        .render(<HyLoading {...props}/>);
    }
    // document.body.appendChild(hyLoadingBoxDom);

  }else{
    const hyLoadingBoxDom=document.getElementById("hy-loading")
    // 直接移除
    if (hyLoadingBoxDom){
      hyLoadingBoxDom.remove();
    }
  }



}

//这里不要直接导出
const HyLoading=memo(function (props: Props) {
  // const [scrollY,setScrollY]=useState(0);
  // useEffect(()=>{
  //   console.log(window.scrollY)
  //   setScrollY(window.scrollY);
  //   console.log(scrollY);
  // },[]);
  // $scrollY={scrollY}

  return (
    <HyLoadingStyle $isShow={props.isShow}
                    $isFullScreen={props.isFullScreen}
                    $size={props.size}
                    $color={props.color}
    >
      {props.children?props.children:(<>
        <span className="loading-dot iconfont">
          <i className="loading-dot-item"></i>
          <i className="loading-dot-item"></i>
          <i className="loading-dot-item"></i>
          <i className="loading-dot-item"></i>
        </span>
        <div className="hy-loding-ttile">{props.title}</div>
      </>)}
    </HyLoadingStyle>
  )
})
export default HyLoading;
